<template>
	<div class="article-lists">
		<el-card class="!border-none" shadow="never">
			<el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
				<el-form-item label="订单状态">
					<el-select
						class="w-60"
						v-model="queryParams.order_status"
						placeholder="请选择"
						clearable
					>
						<el-option label="全部" :value="0"/>
						<el-option label="有效" :value="1"/>
						<el-option label="已过期" :value="2"/>
						<el-option label="无效" :value="3"/>
						<el-option label="已作废" :value="4"/>
					</el-select>
				</el-form-item>
				<el-form-item label="支付状态">
					<el-select
						class="w-60"
						v-model="queryParams.pay_status"
						placeholder="请选择"
						clearable
					>
						<el-option label="全部" :value="0" />
						<el-option label="等待付款" :value="1"/>
						<el-option label="支付成功" :value="2"/>
						<el-option label="支付失败" :value="3"/>
					</el-select>
				</el-form-item>
				<el-form-item label="身份资料状态">
					<el-select
						class="w-60"
						v-model="queryParams.msg_status"
						placeholder="请选择"
						clearable
					>
						<el-option label="全部" :value="0" />
						<el-option label="未提交" :value="1"/>
						<el-option label="待审核" :value="2"/>
						<el-option label="审核通过" :value="3"/>
						<el-option label="审核驳回" :value="4"/>
					</el-select>
				</el-form-item>
				<el-form-item label="租赁结束日期" class="piker">
					<el-date-picker
						v-model="queryParams.end_time"
						type="date"
						format="YYYY-MM-DD"
						value-format="YYYY-MM-DD"
						placeholder="请选择日期"
					/>
				</el-form-item>
				<el-form-item label="主体名称">
					<el-input
						class="w-[240px]"
						v-model="queryParams.name"
						clearable
					/>
				</el-form-item>
				<el-form-item label="归属账号">
					<el-input
						class="w-[240px]"
						v-model="queryParams.account"
						clearable
					/>
				</el-form-item>

				<el-form-item class="w-80">
					<el-button type="primary" @click="resetPage">查询</el-button>
					<el-button @click="resetParams">重置</el-button>
				</el-form-item>
			</el-form>
			</el-card>
		<el-card class="!border-none" shadow="never">
			<el-table size="large" v-loading="pager.loading" :data="pager.lists">
				<el-table-column label="序号" type="index" :index="indexAdd" min-width="90" />
				<el-table-column label="订单编号" prop="sn" min-width="190">
					<template #default="{ row }">
						<el-link type="primary">
							<router-link :to="{ path: getRoutePath('seat.seatOrder/orderInfo'), query: { id: row.order_id } }" > {{ row.sn }} </router-link>
						</el-link>
					</template>
				</el-table-column>
				<el-table-column label="主体类型" prop="name" min-width="90">
					<template #default="{ row }">
						<span>{{ row.user_identity == 1 ? '个人': '企业' }}</span>
					</template>
				</el-table-column>
				<el-table-column label="主体名称" prop="name" min-width="120" />
				<el-table-column label="工位数" prop="seat_count" min-width="90" />
				<el-table-column label="租赁开始日期" prop="start_time" min-width="220" />
				<el-table-column label="租赁结束日期" prop="end_time" min-width="220" />
				<el-table-column label="总价" prop="actual_money" min-width="120" />
				<el-table-column label="积分" prop="deduction_price" min-width="120">
					<template #default="{ row }">
						<span v-if="row.deduction_price">-{{row.deduction_price}}</span>
					</template>
				</el-table-column>
				<el-table-column label="实付款" prop="after_folding_price" min-width="120" />
				<el-table-column label="租金(元)" prop="actual_money" min-width="100" />
				<el-table-column label="订单状态" prop="order_status" min-width="120">
					<template #default="{ row }">
						<span>{{ orderTxt(row.order_status) }}</span>
					</template>
				</el-table-column>
				<!-- <el-table-column label="协议签署状态" prop="is_sign" min-width="120">
					<template #default="{ row }">
						<span>{{row.is_sign == 1 ? '签署成功': '签署失败' }}</span>
					</template>
				</el-table-column> -->
				<el-table-column label="支付状态" prop="pay_status" min-width="150">
					<template #default="{ row }">
						<span>{{ payTxt(row.pay_status) }}</span>
					</template>
				</el-table-column>
				<!-- <el-table-column label="身份资料状态" prop="msg_status" min-width="150">
					<template #default="{ row }">
						<span>{{ msgTxt(row.msg_status) }}</span>
					</template>
				</el-table-column> -->
				<el-table-column label="归属账号" prop="user_account" min-width="130" />
				<!-- <el-table-column label="操作" width="220" fixed="right">
					<template #default="{ row }">
						<el-button v-if="row.order_status == 1 && row.msg_status == 2" v-perms="['seat.seatOrder/msgInfo']" type="primary" link @click="handleConfig(row.seat_info,row.order_id)">审核资料</el-button>
						<el-button v-if="row.is_sign == 1" v-perms="['seat.seatOrder/getSignLink']" type="primary" link @click="handleSign(row.order_id)">签署文件</el-button>
						<el-button v-if="row.status == 3" v-perms="['seat.seatOrder/delOrder']" type="danger" link @click="handleDel(row.order_id)">作废</el-button>
					</template>
				</el-table-column>	 -->
			</el-table>
			<div class="flex justify-end mt-4">
				<pagination v-model="pager" @change="getLists" />
			</div>
		</el-card>
		<config-popup v-if="showConfig" ref="configRef" @success="getLists" @close="showConfig = false" />
		<el-dialog
			v-model="showCompany"
			title="到账确认"
			width="500"
		>
			<div class="flex">
				<el-icon size="20" color="#E6A23C"><Warning /></el-icon>
				<div>请认真核对银行流水，确认租金是否已到账</div>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="showCompany = false">取消</el-button>
					<el-button type="danger" @click="notReceived">未到账</el-button>
					<el-button type="primary" @click="alreadyReceived">已到账</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>
<script lang="ts" setup name="orderLists">
	import { orderLists, authOrder, getSignLink, payFail, delOrder } from '@/api/sharedoffice/orderlists';
	import { usePaging } from '@/hooks/usePaging';
	import feedback from '@/utils/feedback';
	import ConfigPopup from './config.vue';
	import { shallowRef, computed } from 'vue';
	import {getRoutePath} from '@/router'
	const showCompany = ref(false)
	const order_id = ref()
	const queryParams = reactive({
		order_status: '',
		pay_status: '',
		msg_status: '',
		end_time: '',
		name: '',
		account: '',
	})
	// 订单状态文字转化
	const orderTxt = (num:any) => {
		return computed(():string=>{
			let txt = '';
			switch(num) {
				case 1: txt = '有效';break;
				case 2: txt = '过期';break;
				case 3: txt = '无效';break;
				case 4: txt = '作废';break;
			}
			return txt;
		})
	}
	// 支付状态文字转化
	const payTxt = (num:any) => {
		return computed(():string=>{
			let txt = '';
			switch(num) {
				case 1: txt = '待支付';break;
				case 2: txt = '支付中';break;
				case 3: txt = '等待确认（对公）';break;
				case 4: txt = '已支付 ';break;
				case 5: txt = '支付失败 ';break;
				case 6: txt = '已作废 ';break;
			}
			return txt;
		})
	}
	// 身份状态文字转化
	const msgTxt = (num:any) => {
		return computed(():string=>{
			let txt = '';
			switch(num) {
				case 1: txt = '未提交';break;
				case 2: txt = '待审核';break;
				case 3: txt = '审核通过';break;
				case 4: txt = '审核驳回 ';break;
			}
			return txt;
		})
	}
	// 切页序号变化
    const indexAdd = (index: number) => {
        const page = pager.page // 当前页码
        const pagesize = pager.size // 每页条数
        return index + 1 + (page - 1) * pagesize
    }
	const { pager, getLists, resetPage, resetParams } = usePaging({
		fetchFun: orderLists,
		params: queryParams
	})
	const configRef = shallowRef<InstanceType<typeof ConfigPopup>>();
	const showConfig = ref(false);
	const handleConfig = async (seatarr: any, id: number) => {
	    showConfig.value = true
	    await nextTick()
	    configRef.value?.open()
	    configRef.value?.getDetail(seatarr,id as any)
	}
	const handleSure = async (id : number) => {
		showCompany.value = true;
		order_id.value = id;
		// await feedback.confirm('确认对公转账？')
		// try{
		// 	await authOrder({ id })
		// 	getLists();
		// }catch(e){
		// 	//TODO handle the exception
		// }
	}
	//未到账
	const notReceived = async () => {
		await payFail({ id: order_id.value })
		showCompany.value = false;
		getLists();
	}
	//已到账
	const alreadyReceived = async () => {
		await authOrder({ id: order_id.value })
		showCompany.value = false;
		getLists();
	}
	const handleSign = async (id : number) => {
		try{
			const data = await getSignLink({ id });
			if( data.link.url ){
				window.open(data.link.url);
			}else{
				feedback.msgError(data.link.msg);
			}
		}catch(e){
			console.log(e);
			//TODO handle the exception
		}
	}
	// 作废
	const handleDel = async (id : number) =>{
		await feedback.confirm('订单作废后，客户将无法查看对应订单，所选工位会变为空闲，请确认是否作废该订单？', '作废订单','error')
		try{
			await delOrder({id})
			getLists();
		}catch(e){
			//TODO handle the exception
		}
	}
	onActivated(() => {
		getLists()
		getLists();
	})

	getLists()
</script>
<style lang="scss" scoped>
.piker{
	width: 370px;
	::v-deep .el-input__wrapper{
		width: 240px;
	}
}

</style>